<template>
  <div class="student-list">
    <h2>学生信息表</h2>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>手机号</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="student.id">
          <td>{{ index + 1 }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.sex }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.phone }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
    import axios from 'axios';  // 导入HTTP请求库

export default {
  name: 'StudentList',         // 组件名称
  data() {
    return {
      students: []             // 响应式数据：存储学生列表（初始为空数组）
    }
  },
  created() {                  // 生命周期钩子：组件创建后立即执行
    this.fetchStudents();      // 调用数据获取方法
  },
  methods: {
    async fetchStudents() {    // 异步方法：获取学生数据
      try {
        // 发送GET请求到指定API端点
        const response = await axios.get('/api/student/getAllStudents');
        // 将响应数据赋值给students数组（触发视图更新）
        if(response.data.code !== 200){
          throw new Error('获取学生数据失败');
        }
      this.students = response.data.data;
      } catch (error) {        // 错误处理
        console.error('获取学生数据失败:', error);  // 控制台输出错误详情
        alert('无法加载学生数据，请检查网络连接'); // 用户提示
      }
    }
  }
}
</script>



<style scoped>
.student-list {
  margin: 20px;
}

h2 {
  font-size: 2.2em;      /* 调大标题字体 */
  text-align: center;     /* 标题居中 */
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 0.9em;      /* 调小表格字体 */
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;    /* 表格内容居中 */
}

/* 保持其他样式不变 */
th {
  background-color: #f5f5f5;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>
